<template>
	<view class="wrap">
		<!-- 分段器 -->
		<view class="tab-container">
			<view v-for="(item,index) in list" class="tab-item" :class="{'active' : (curNow == index)}" @click="onTabItemClick(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 姓名电话模块 -->
		<view class="input-user">
			<u-field v-model="taskInfo.username" label="姓名" placeholder="请填写姓名" :border-bottom="borderBottom" input-align="right"
			 placeholder-style="color:#ccc">
			</u-field>
			<u-field v-model="taskInfo.phoneNumber" label="电话" placeholder="请填写电话号码" input-align="right" type="number"
			 placeholder-style="color:#ccc" maxlength="11">
			</u-field>
		</view>
		<!-- 分段器第一部分 取快递 -->
		<view class="express-content" v-if="curNow === 0" ref>
			<u-field v-model="taskInfo.carryPosition" label="取件地点" placeholder="请填写取件地点" input-align="right" placeholder-style="color:#ccc">
			</u-field>
			<u-field v-model="taskInfo.arrivePosition" label="送达地点" placeholder="请填写送达地点" input-align="right" placeholder-style="color:#ccc">
			</u-field>
			<!-- 详情模块 -->
			<view class="expressDetails">取件信息</view>
			<view class="detailsBox">
				<textarea class="details" maxlength="150" fixed placeholder="该信息仅自己和接单人可见,请准确填写取件码,快递公司等..." v-model="taskInfo.carryInfomation"></textarea>
				<text class="detailsCount" style="color: #C0C4CC;position: absolute;right: -15px;">
					{{taskInfo.carryInfomation.length}}/150
				</text>
			</view>
		</view>
		<!-- 分段器第二部分 其他任务 -->
		<view class="task-content" v-if="curNow === 1">
			<u-field v-model="orderTitle" label="订单标题" placeholder="如:秋天的第一杯奶茶~" input-align="right" placeholder-style="color:#ccc">
			</u-field>
			<u-field v-model="taskInfo.carryPosition" label="取件地点" placeholder="请填写取件地点" input-align="right" placeholder-style="color:#ccc">
			</u-field>
			<u-field v-model="taskInfo.arrivePosition" label="送达地点" placeholder="请填写送达地点" input-align="right" placeholder-style="color:#ccc">
			</u-field>
			<view class="task-title">任务描述</view>
			<view class="detailsBox">
				<textarea class="details" maxlength="150" fixed placeholder="请输入任务详情(限定150个字)..." v-model="taskCount"></textarea>
				<text class="contentCount" style="color: #C0C4CC;position: absolute;right: 40rpx;">
					{{taskCount.length}}/150
				</text>
			</view>
		</view>
		<view class="orderMoney">
			<u-field v-model="taskInfo.orderMoney" label="赏金" placeholder="打赏下吧~" input-align="right" placeholder-style="color:#ccc"
			 type="number">
			</u-field>
		</view>
		<view class="correct-box">
			<u-button class="correct-button" @click="onPublishTaskClick" type="success">下单</u-button>
		</view>
		<u-tabbar :list="vuex_tabbar" :mid-button="true" @change="vuex_onTabChange"></u-tabbar>
	</view>
</template>

<script>
	export default {
		onLoad() {
			// 如果是登录状态那么默认取缓存中的信息
			if (this.vuex_loginStatus == 1) {
				if (this.vuex_registerStatus == false) {
					// 当前没有完善个人信息
					uni.showModal({
						title: "警告",
						content: "您当前没有完善个人信息,请前往完善!",
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: "../functionPages/register/register" // 到完善信息界面
							})
						}
					})
				}

			} else {
				// 如果当前没有登录则要求进行登录
				uni.reLaunch({
					url: "my" //进入我的会自动判断一次权限
				})
			}
			
		},
		data() {
			return {
				list: [{
						name: '取快递'
					},
					{
						name: '跑腿'
					}
				],
				curNow: 0,
				taskInfo: {
					username: '', // 发布人
					phoneNumber: '', // 电话号码
					carryPosition: '', // 取件地点
					arrivePosition: '', // 送达地点
					carryInfomation: '', // 取件信息
					orderMoney: '' // 下单金额
				},
				orderTitle: '', // 订单标题
				taskCount: '', // 输入字数
				height: '150',
				type: 'text',
				borderBottom: true,
				expressBottom: false,
				customStyle: {
					position: 'absolute',
					color: '#D2691E',
					right: '20rpx',
					bottom: '20rpx'
				},
				fieldStyle: {
					background: 'RGB(250,250,250)',
					marginTop: '40rpx',
					borderRadius: '10rpx',
					height: '150rpx',
				}
			}
		},
		methods: {
			onTabItemClick(index) {
				this.curNow = index;
			},
			onBackpress() {
				return false;
			},
			// 当下订单按钮被点击
			onPublishTaskClick() {
				// 当前未登录 TODO 提示
				if (this.vuex_loginStatus == 0) {
					// 当前没有权限
					// 2020年11月24日 21:59:20
					uni.showModal({
						title: "您当前没有登录",
						content: '缺少必要的权限,请先登录',
						confirmText: '了解',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/tabPages/my'
								});
							}
						}
					})
					return //拦截
				}
				// 判断当前的tab为取快递|跑腿
				if (this.curNow == 0) {
					// 取快递 -> 需要加上标题
					for (let e of Object.values(this.taskInfo)) {
						if (e.length === 0) {
							uni.showToast({
								title: '请完善订单信息',
								icon: 'none'
							})
							return
						}
					}
					let param = {
						moneyReward: this.taskInfo.orderMoney,
						pickUpAddress: this.taskInfo.carryPosition,
						toAddress: this.taskInfo.arrivePosition,
						taskType: 1,
						taskTitle: '代取快递',
						publishName: this.taskInfo.username,
						workContent: this.taskInfo.carryInfomation,
						publishPhone: this.taskInfo.phoneNumber
					}
					this.$u.api.publishTask(param).then(res => {
						console.log(res);
						//成功之后清空内容
						this.detailsCount = ''
						for (let i in this.taskInfo) {
							// 对个人姓名和电话进行保留
							if (i == 'username' || i == 'phoneNumber') continue;
							this.taskInfo[i] = ''
						}
						//TODO 提示信息
						//下单成功后提示并跳转
						uni.showToast({
							title: '下单成功',
							success: function() {
								let time = setTimeout(function() {
									uni.reLaunch({
										url: '/pages/tabPages/index'
									});
									clearTimeout(time)
								}, 1000)
							}
						})
					})
				} else {
					// 跑腿
					if (this.taskInfo.username.length === 0 ||
						this.taskInfo.phoneNumber.length === 0 ||
						this.taskInfo.carryPosition.length === 0 ||
						this.taskInfo.arrivePosition.length === 0 ||
						this.taskInfo.orderMoney.length === 0 ||
						this.orderTitle.length === 0 ||
						this.taskCount.length === 0) {
						uni.showToast({
							title: '请完善订单信息',
							icon: 'none'
						})
						return
					}
					let param = {
						moneyReward: this.taskInfo.orderMoney,
						pickUpAddress: this.taskInfo.carryPosition,
						toAddress: this.taskInfo.arrivePosition,
						taskType: 2,
						taskTitle: this.orderTitle,
						publishName: this.taskInfo.username,
						workContent: this.taskCount,
						publishPhone: this.taskInfo.phoneNumber
					}
					this.$u.api.publishTask(param).then(res => {
						//成功之后清空内容
						console.log(res);
						this.taskCount = ''
						for (let i in this.taskInfo) {
							// 对个人姓名和电话进行保留
							if (i == 'username' || i == 'phoneNumber') continue;
							this.taskInfo[i] = ''
						}
						//TODO 提示信息
						//下单成功后提示并跳转
						uni.showToast({
							title: '下单成功',
						})
						let time = setTimeout(function() {
							uni.reLaunch({
								url: '/pages/tabPages/index'
							});
							clearTimeout(time)
						}, 1000)
					})
				}
			}
		},
		mounted() {
			this.taskInfo.username = this.vuex_user
			this.taskInfo.phoneNumber = this.vuex_userInfo.phone
		}

	}
</script>

<style lang="scss">
	.tab-container {
		background-color: #fff;
		height: 30px;
		line-height: 30px;
		display: flex;
		justify-content: space-evenly;

		.tab-item {
			text-align: center;
			position: relative;
			font-size: 16px;
			color: #9f9f9f;
			width: 50%;

			&.active {
				color: #FA3534;
				font-weight: bold;
				border-top: 1px solid #FA3534;
				background: rgb(238, 238, 238);
			}

		}
	}

	.input-user {
		margin-top: 20rpx;
		background: #fff;
	}

	.express-content {
		width: 100%;
		margin-top: 60rpx;
		background: #fff;
		height: 500rpx;

		// position: relative;	
		.expressDetails {
			text-indent: 27rpx;
			margin-top: 10rpx;
		}

		.detailsBox {
			width: 80%;
			margin: 15px auto 0;
			position: relative;

			.details {
				width: 100%;
				background: rgb(250, 250, 250);
				height: 150rpx;
				font-size: 14px;
				border-radius: 8rpx;
				padding: 10px 10px 0;
			}
		}
	}

	.task-content {
		width: 100%;
		margin-top: 60rpx;
		background: #fff;
		height: 550rpx;

		// padding: 15rpx 25rpx;
		.task-title {
			text-indent: 27rpx;
			margin-top: 10rpx;
		}

		.detailsBox {
			width: 80%;
			margin: 10px auto 0;

			.details {
				width: 100%;
				background: rgb(250, 250, 250);
				height: 150rpx;
				font-size: 14px;
				border-radius: 8px;
				padding: 10px 10px 0;
			}
		}
	}

	.correct-box {
		height: 40px;
		width: 100%;
		margin-top: 10px;
		background: #fff;

		.correct-button {
			outline-style: none;
			font-size: 16px;
			border: none;
		}
	}

	.orderMoney {
		margin-top: 8rpx;
		background: #fff;
	}
</style>
